<template>
  <div>
    <div class="report">
      <div @click="formfeed"></div>
     <div id="pdfDom1">
        <div id="basic" style="margin: auto">
          <div style="display: flex">
            <div
              style="
                width: 60%;
                background-color: #2ab28b;
                height: 100px;
                text-align: center;
                line-height: 100px;
              "
            >
              <span style="font-size: 30px; font-weight: bold; color: #ffffff"
                >儿童</span
              ><span style="font-size: 30px; color: #666666; margin-left: 20px"
                >基本信息报告</span
              >
            </div>
            <div style="height: 100px; width: 40%; background-color: #2ab28b">
              <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" /> -->
            </div>
          </div>
          <!-- 基本信息 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: #2ab28b;
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/12.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              儿童基本信息
            </div>
          </div>
          <div
            style="
              width: 99%;
              border-top: 2px solid #09a578;
              border-right: 2px solid #09a578;
              margin-top: 10px;
              font-size: 14px;
            "
          >
            <div style="display: flex">
              <div
                style="
                  background-color: #2ab28b;
                  width: 9.9%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                检测日期
              </div>
              <div
                style="
                  width: 90%;
                  height: 40px;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  text-indent: 20px;
                "
              >
                {{ report_time }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                儿童姓名
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.username ?? "[]" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                性别
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.sex == 1 ? "女" : "男" ?? "[]" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                出生日期
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ birth ?? "[]" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                监护人姓名
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.guardian_name ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                监护人手机号
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.guardian_mobile ?? "[]" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                身高
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.height ? contents.height + "CM" : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                体重
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.weight ? contents.weight + "KG" : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                头围
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.touwei ? contents.touwei + "CM" : "" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                出生身长
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.chushengsg ? contents.chushengsg + "CM" : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                出生体重
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.chushengtz ? contents.chushengtz + "KG" : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                腹围
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.fuwei ? contents.fuwei + "CM" : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                血型
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.xuexing_value ? contents.xuexing_value : "" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                民族
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.minzu_value ? contents.minzu_value : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                与监护人关系
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.guanxi_value ? contents.guanxi_value : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                家长受教育程度
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{ contents.jiaoyu_value ? contents.jiaoyu_value : "" }}
              </div>
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 10%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                "
              >
                出生情况
              </div>
              <div
                style="
                  width: 15%;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
                  border-bottom: 2px solid #09a578;
                "
              >
                {{
                  contents.birthSituation_value
                    ? contents.birthSituation_value
                    : ""
                }}
              </div>
            </div>
          </div>
          <!-- 其他信息 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/12.jpg" style="height: 40px"  alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              其他信息
            </div>
          </div>
          <div
            style="
              width: 99%;
              border-top: 2px solid #09a578;
              border-right: 2px solid #09a578;
              margin-top: 10px;
            "
          >
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                妊娠不良习惯
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                "
              >
                {{ contents.Bad_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                妊娠疾病情况
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                "
              >
                {{ contents.disease_value ?? "[]" }}
              </div>
            </div>
          </div>
          <!-- 孩子临床表现 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/12.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              孩子临床表现
            </div>
          </div>
          <div
            style="
              width: 99%;
              border-top: 2px solid #09a578;
              border-right: 2px solid #09a578;
              margin-top: 10px;
            "
          >
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                头发
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.hair_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                眼睛
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.eye_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                皮肤
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.skin_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                口腔
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.oralCavity_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                牙齿
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.tooth_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                颈部
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.neck_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                神经病变
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.Neuropathy_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                神经症状
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.symptoms_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                体征
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.sign_value ?? "[]" }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                骨骼
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.bones_value ?? "[]" }}
              </div>
            </div>
          </div>
          <!-- 食物过敏 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/12.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              食物过敏
            </div>
          </div>
          <div
            style="
              width: 99%;
              border-top: 2px solid #09a578;
              border-right: 2px solid #09a578;
              margin-top: 10px;
            "
          >
            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                过敏食物
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.allergy_value ?? "[]" }}
              </div>
            </div>

            <div style="display: flex">
              <div
                style="
                  background-color: rgb(42, 178, 139);
                  width: 14%;
                  text-align: center;
                  line-height: 40px;
                  color: #fff;
                  border-right: 2px solid #09a578;
                  border-bottom: 2px solid #09a578;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                食物不耐饿
              </div>
              <div
                style="
                  width: 90%;
                  border-bottom: 2px solid #09a578;
                  line-height: 40px;
                  padding: 0px 20px;
                  overflow: hidden;
                  height: 42px;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ contents.intolerance_value ?? "[]" }}
              </div>
            </div>
          </div>
          <!-- 体成分数据分析 -->
          <div style="margin-top:10px;">
            <!-- <div style="page-break-before: always"> -->
            <div style="display: flex">
              <div
                style="
                  width: 60%;
                  background-color: #2ab28b;
                  height: 100px;
                  text-align: center;
                  line-height: 100px;
                "
              >
                <span style="font-size: 30px; font-weight: bold; color: #ffffff"
                  >儿童</span
                ><span
                  style="font-size: 30px; color: #666666; margin-left: 20px"
                  >体成分数据分析报告</span
                >
              </div>
              <div style="height: 100px; width: 40%; background-color: #2ab28b">
                <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" /> -->
              </div>
            </div>
            <!-- <div style=" page-break-after:inherit;"></div> -->
            <div
              style="
                width: 100%;
                height: 40px;
                background-color: rgb(42, 178, 139);
                margin-top: 5px;
                display: flex;
              "
            >
              <div>
                <img
                  src="../../assets/img/13.jpg"
                  style="height: 40px"
                  
                  alt=""
                />
              </div>
              <div
                style="
                  font-size: 20px;
                  margin-left: 10px;
                  line-height: 40px;
                  color: #fff;
                "
              >
                体成分数据分析
              </div>
            </div>
            <ChildViewprint></ChildViewprint>
          </div>
          <!-- 节段水分分析 -->
          <div
            style="margin-top: 30px; margin-bottom: 10px; margin-left: 30px"
          ></div>
          <!-- <div style=" page-break-after:left;"></div> -->
          <div style="display: flex;margin-top:500px">
            <!-- <div style="display: flex; page-break-before: always"> -->
            <div
              style="
                width: 60%;
                background-color: #2ab28b;
                height: 100px;
                text-align: center;
                line-height: 100px;
              "
            >
              <span style="font-size: 30px; font-weight: bold; color: #ffffff"
                >儿童</span
              ><span style="font-size: 30px; color: #666666; margin-left: 20px"
                >膳食营养分析报告</span
              >
            </div>
            <div style="height: 100px; width: 40%; background-color: #2ab28b">
              <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" /> -->
            </div>
          </div>
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/14.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              膳食记录
            </div>
          </div>
          <!-- <div style=" page-break-after:left;"></div> -->
          <div style="height:2500px;">
            <div
            style="
              width: 98%;
              border: 2px solid #09a578;
              text-align: center;
              font-size: 12px;
              margin-top: 10px;
              margin-left: 10px;
            "
          >
            <div style="display: flex">
              <div
                class="biao1"
                style="width: 16%; height: 40px; line-height: 40px"
              >
                菜名
              </div>
              <div
                class="biao1"
                style="width: 12%; height: 40px; line-height: 40px"
              >
                能量
              </div>
              <div
                class="biao1"
                style="width: 12%; height: 40px; line-height: 40px"
              >
                脂肪
              </div>
              <div
                class="biao1"
                style="width: 12%; height: 40px; line-height: 40px"
              >
                钙
              </div>
              <div
                class="biao1"
                style="width: 12%; height: 40px; line-height: 40px"
              >
                镁
              </div>
              <div
                class="biao1"
                style="width: 12%; height: 40px; line-height: 40px"
              >
                锌
              </div>
              <div
                class="biao1"
                style="width: 12%; height: 40px; line-height: 40px"
              >
                维生素A
              </div>
              <div
                class="biao1"
                style="width: 12%; height: 40px; line-height: 40px"
              >
                维生素B1
              </div>
            </div>
            <div v-for="(item, index) in diet" :key="index">
              <div style="display: flex">
                <div
                  class="biao2"
                  style="width: 16%; height: 40px; line-height: 40px"
                >
                  {{ item.food_name }}
                </div>
                <div
                  class="biao2"
                  style="width: 12%; height: 40px; line-height: 40px"
                >
                  {{ item.energy ? item.energy : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 12%; height: 40px; line-height: 40px"
                >
                  {{ item.fat ? item.fat : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 12%; height: 40px; line-height: 40px"
                >
                  {{ item.calcium ? item.calcium : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 12%; height: 40px; line-height: 40px"
                >
                  {{ item.magnesium ? item.magnesium : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 12%; height: 40px; line-height: 40px"
                >
                  {{ item.zinc ? item.zinc : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 12%; height: 40px; line-height: 40px"
                >
                  {{ item.vitamin_a ? item.vitamin_a : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 12%; height: 40px; line-height: 40px"
                >
                  {{ item.vitamin_b1 ? item.vitamin_b1 : 0 }}
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              width: 98%;
              border: 2px solid #09a578;
              text-align: center;
              font-size: 12px;
              margin-top: 10px;
              margin-left: 10px;
            "
          >
            <div style="display: flex">
              <div
                class="biao1"
                style="width: 16%; height: 40px; line-height: 40px"
              >
                菜名
              </div>
              <div
                class="biao1"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                维生素C
              </div>
              <div
                class="biao1"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                蛋白质
              </div>
              <div
                class="biao1"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                碳水
              </div>
              <div
                class="biao1"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                钠
              </div>
              <div
                class="biao1"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                铁
              </div>
              <div
                class="biao1"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                硒
              </div>
              <div
                class="biao1"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                维生素E
              </div>
              <div
                class="biao3"
                style="width: 10.5%; height: 40px; line-height: 40px"
              >
                维生素B2
              </div>
            </div>
            <div v-for="(item, index) in diet" :key="index">
              <div style="display: flex">
                <div
                  class="biao2"
                  style="width: 16%; height: 40px; line-height: 40px"
                >
                  {{ item.food_name }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.vitamin_c ? item.vitamin_c : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.protein ? item.protein : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.carbohydrate ? item.carbohydrate : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.sodium ? item.sodium : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.iron ? item.iron : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.selenium ? item.selenium : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.vitamin_e ? item.vitamin_e : 0 }}
                </div>
                <div
                  class="biao2"
                  style="width: 10.5%; height: 40px; line-height: 40px"
                >
                  {{ item.vitamin_b2 ? item.vitamin_b2 : 0 }}
                </div>
              </div>
            </div>
          </div>
          </div>

          <!-- 膳食评价 -->
          <ChildViewDietary></ChildViewDietary>
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 20px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/19.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              膳食结构分析(日均值)
            </div>
          </div>
          <!-- <div style=" page-break-after:left;"></div> -->
          <div
            style="
              width: 98%;
              border: 2px solid #09a578;
              text-align: center;
              line-height: 40px;
              margin-top: 5px;
            "
          >
            <div style="display: flex">
              <div class="biao1" style="width: 12.5%">膳食结构</div>

              <div
                class="biao7"
                :style="
                  item.product_energy < item.systam_down
                    ? 'color:red'
                    : item.product_energy >= item.systam_down &&
                      item.product_energy <= item.systam_up
                    ? 'color:black'
                    : 'color:red'
                "
                v-for="(item, index) in pagoda"
                :key="index"
                style="width: 12.5%"
              >
                {{
                  item.title == undefined
                    ? ""
                    : item.product_energy < item.systam_down
                    ? "▼" + item.title
                    : item.product_energy >= item.systam_down &&
                      item.product_energy <= item.systam_up
                    ? "✔" + item.title
                    : "▲" + item.title
                }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao1" style="width: 12.5%">推荐(g)</div>
              <div
                class="biao7"
                v-for="(item, index) in pagoda"
                :key="index"
                style="width: 12.5%"
              >
                {{
                  item.title == undefined
                    ? ""
                    : item.systam_down + "~" + item.systam_up
                }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao5" style="width: 12.5%">实际</div>
              <div
                class="biao7"
                v-for="(item, index) in pagoda"
                :key="index"
                style="width: 12.5%"
              >
                {{ item.title == undefined ? "" : item.product_energy }}
              </div>
            </div>
          </div>
          <!-- 营养素 -->
          <!-- <div style=" page-break-after:left;"></div> -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 5px;
              display: flex;
              page-break-before: always;
            "
          >
            <div>
              <img src="../../assets/img/17.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              能量&营养摄入量分析
            </div>
          </div>
          <!-- <div style=" page-break-after:left;"></div> -->
          <div style="width: 99%; border: 2px solid #09a578; margin-top: 5px">
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                能量
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="energys"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                蛋白质
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="proteins"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                脂肪
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="fats"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                碳水化合物
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="carbohydrates"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                钙
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="calciums"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                钠
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="sodiums"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                镁
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="magnesiums"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                铁
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="irons"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                锌
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="zincs"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                硒
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="seleniums"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                维生素A
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="vitamin_as"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                维生素E
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="vitamin_es"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                维生素B1
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="vitamin_b1s"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao1"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                维生素B2
              </div>
              <div class="biao4" style="width: 89%; padding-left: 5px">
                <div v-html="vitamin_b2s"></div>
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao5"
                style="
                  width: 11%;
                  line-height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                维生素C
              </div>
              <div class="biao7" style="width: 89%; padding-left: 5px">
                <div v-html="vitamin_cs"></div>
              </div>
            </div>
          </div>

          <!-- 孕期营养干预报告 -->

          <!-- <div style="display: flex; margin-top: 5px; page-break-before: always"> -->
            <div style="display: flex; margin-top: 5px;margin-top:700px;">
            <div style="display: flex; width: 100%">
              <div
                style="
                  width: 60%;
                  background-color: #2ab28b;
                  height: 100px;
                  text-align: center;
                  line-height: 100px;
                "
              >
                <span style="font-size: 30px; font-weight: bold; color: #ffffff"
                  >儿童</span
                ><span
                  style="font-size: 30px; color: #666666; margin-left: 20px"
                  >喂养习惯报告</span
                >
              </div>
              <div style="height: 100px; width: 40%; background-color: #2ab28b">
                <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" /> -->
              </div>
            </div>
          </div>
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/21.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              儿童饮食及生活方式原则
            </div>
          </div>
          <div
            style="
              width: 98%;
              min-height: 150px;
              border: 2px solid #09a578;
              margin-top: 10px;
              padding-left: 10px;
            "
            v-html="principle"
          ></div>
          <!-- 膳食方案明细 -->

          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/22.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              膳食方案明细
            </div>
          </div>
          <!-- <div style=" page-break-after:always;"></div> -->
          <div
            style="
              width: 98%;
              border: 2px solid #09a578;
              line-height: 40px;
              text-align: center;
              margin-top: 5px;
              margin-left: 10px;
            "
          >
            <div style="display: flex">
              <div
                class="biao1"
                style="height: 40px; width: 50%; color: #ffffff"
              >
                名称
              </div>
              <div
                class="biao3"
                style="height: 40px; width: 50%; color: #ffffff"
              >
                推荐值
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">能量</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ letEnergy.start }}～{{ letEnergy.end }}
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao2"
                style="height: 40px; width: 50%; text-align: center"
              >
                碳水化合物
              </div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ carbohydrate.start }}～{{ carbohydrate.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">蛋白质</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ protein.start }}～{{ protein.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">脂肪</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ fat.start }}～{{ fat.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">
                碳水化合物
              </div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ carbohydrate.start }}～{{ carbohydrate.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">钙</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ calcium.start }}～{{ calcium.end }}
              </div>
            </div>
          
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">钠</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ sodium.start }}～{{ sodium.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">镁</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ magnesium.start }}～{{ magnesium.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">铁</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ iron.start }}～{{ iron.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">锌</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ zinc.start }}～{{ zinc.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">硒</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ selenium.start }}～{{ selenium.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">维生素A</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ vitamin_a.start }}～{{ vitamin_a.end }}
              </div>
            </div>
            <div style="display: flex">
              <div
                class="biao2"
                style="height: 50px; width: 50%; line-height: 50px"
              >
                维生素E
              </div>
              <div
                class="biao4"
                style="height: 50px; width: 50%; line-height: 50px"
              >
                {{ vitamin_e.start }}～{{ vitamin_e.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">维生素B1</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ vitamin_b1.start }}～{{ vitamin_b1.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">维生素B2</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ vitamin_b2.start }}～{{ vitamin_b2.end }}
              </div>
            </div>
            <div style="display: flex">
              <div class="biao2" style="height: 40px; width: 50%">维生素C</div>
              <div class="biao4" style="height: 40px; width: 50%">
                {{ vitamin_c.start }}～{{ vitamin_c.end }}
              </div>
            </div>
          </div>
          <!-- <div style="width:73%;border:2px solid #09a578;line-height:40px;text-align:center;margin-top:5px;margin-left:10px;">
          <div style="display:flex;">
            <div class="biao1" style="height:40px;width:50%;color: #FFFFFF;">名称</div>
            <div class="biao3" style="height:40px;width:50%;color: #FFFFFF;">推荐值</div>
          </div>
         
        </div> -->

          <div
            style="
              width: 99%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 20px;
              display: flex;
              page-break-before: always;
            "
          >
            <div>
              <img src="../../assets/img/23.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              一周膳食清单
            </div>
          </div>
          <div
            style="border: 1px solid #09a578; width: 98%; padding-bottom: 20px"
          >
            <div class="dietOn" v-for="item in diet_analysis" :key="item">
              <div class="time-botton">
                <img
                  src="../../assets/img/evaluaction_service_icon.png"
                  alt=""
                  style="width: 15px; height: 15px"
                  
                />
                {{ item.pName }}
              </div>

              <div style="display: flex">
                <div class="plates" style="margin-left: 10px">
                  <div class="time-type time-left-color">早餐</div>
                  <div class="der">
                    <div style="margin-left: 6%; padding-top: 6%">
                      <span
                        class="plates-top-img"
                        v-for="breakfast in item.早餐"
                        :key="breakfast"
                        ><img
                          :src="
                            'http://' + baseUrl + '/' + breakfast.meal_image
                          "
                          
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="earlier in item.早点"
                        :key="earlier"
                        ><img
                          :src="'http://' + baseUrl + '/' + earlier.meal_image"
                          alt=""
                          
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>
                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      早餐7:00:
                      <span v-for="breakfast in item.早餐" :key="breakfast">
                        <o class="foodsNames">{{ breakfast.food_name }}</o>
                        重量:{{ breakfast.weight }}g;
                      </span>
                    </div>
                    <div>
                      早点10:00:
                      <span v-for="earlier in item.早点" :key="earlier">
                        <o class="foodsNames">{{ earlier.food_name }}</o>
                        重量:{{ earlier.weight }}g;
                      </span>
                    </div>
                  </div>
                </div>

                <div class="plates">
                  <div class="time-type time-common-color">午餐</div>
                  <div class="der">
                    <div style="">
                      <span
                        class="plates-top-img"
                        v-for="lunch in item.午餐"
                        :key="lunch"
                        ><img
                          :src="'http://' + baseUrl + '/' + lunch.meal_image"
                          alt=""
                          
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="noon in item.午点"
                        :key="noon"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + noon.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>

                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      午餐12:00:
                      <span v-for="lunch in item.午餐" :key="lunch">
                        <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{
                          lunch.weight
                        }}g;
                      </span>
                    </div>
                    <div>
                      午点15:00:
                      <span v-for="noon in item.午点" :key="noon">
                        <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{
                          noon.weight
                        }}g;
                      </span>
                    </div>
                  </div>
                </div>

                <div class="plates">
                  <div class="time-type time-right-color">晚餐</div>
                  <div class="der">
                    <div style="margin-left: 6%; padding-top: 6%">
                      <span
                        class="plates-top-img"
                        v-for="dinner in item.晚餐"
                        :key="dinner"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + dinner.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="late in item.晚点"
                        :key="late"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + late.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>

                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      晚餐18:00:
                      <span v-for="dinner in item.晚餐" :key="dinner">
                        <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{
                          dinner.weight
                        }}g;
                      </span>
                    </div>
                    <div>
                      晚点21:00:
                      <span v-for="late in item.晚点" :key="late">
                        <o class="foodsNames">{{ late.food_name }}</o> 重量:{{
                          late.weight
                        }}g;
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              border: 2px solid #09a578;
              width: 98%;
              padding-bottom: 20px;
              margin-top:100px;
              /* page-break-before: always; */
            "
          >
            <div class="dietOn" v-for="item in diet_analysis1" :key="item">
              <div class="time-botton">
                <img
                  src="../../assets/img/evaluaction_service_icon.png"
                  alt=""
                  
                  style="width: 15px; height: 15px"
                />
                {{ item.pName }}
              </div>

              <div style="display: flex">
                <div class="plates" style="margin-left: 10px">
                  <div class="time-type time-left-color">早餐</div>
                  <div class="der">
                    <div style="margin-left: 6%; padding-top: 6%">
                      <span
                        class="plates-top-img"
                        v-for="breakfast in item.早餐"
                        :key="breakfast"
                        ><img
                          :src="
                            'http://' + baseUrl + '/' + breakfast.meal_image
                          "
                          
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="earlier in item.早点"
                        :key="earlier"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + earlier.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>
                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      早餐7:00:
                      <span v-for="breakfast in item.早餐" :key="breakfast">
                        <o class="foodsNames">{{ breakfast.food_name }}</o>
                        重量:{{ breakfast.weight }}g;
                      </span>
                    </div>
                    <div>
                      早点10:00:
                      <span v-for="earlier in item.早点" :key="earlier">
                        <o class="foodsNames">{{ earlier.food_name }}</o>
                        重量:{{ earlier.weight }}g;
                      </span>
                    </div>
                  </div>
                </div>

                <div class="plates">
                  <div class="time-type time-common-color">午餐</div>
                  <div class="der">
                    <div style="">
                      <span
                        class="plates-top-img"
                        v-for="lunch in item.午餐"
                        :key="lunch"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + lunch.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="noon in item.午点"
                        :key="noon"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + noon.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>

                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      午餐12:00:
                      <span v-for="lunch in item.午餐" :key="lunch">
                        <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{
                          lunch.weight
                        }}g;
                      </span>
                    </div>
                    <div>
                      午点15:00:
                      <span v-for="noon in item.午点" :key="noon">
                        <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{
                          noon.weight
                        }}g;
                      </span>
                    </div>
                  </div>
                </div>

                <div class="plates">
                  <div class="time-type time-right-color">晚餐</div>
                  <div class="der">
                    <div style="margin-left: 6%; padding-top: 6%">
                      <span
                        class="plates-top-img"
                        v-for="dinner in item.晚餐"
                        :key="dinner"
                        ><img
                          :src="'http://' + baseUrl + '/' + dinner.meal_image"
                          alt=""
                          
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="late in item.晚点"
                        :key="late"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + late.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>

                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      晚餐18:00:
                      <span v-for="dinner in item.晚餐" :key="dinner">
                        <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{
                          dinner.weight
                        }}g;
                      </span>
                    </div>
                    <div>
                      晚点21:00:
                      <span v-for="late in item.晚点" :key="late">
                        <o class="foodsNames">{{ late.food_name }}</o> 重量:{{
                          late.weight
                        }}g;
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              border: 2px solid #09a578;
              width: 98%;
              padding-bottom: 20px;
              page-break-before: always;
            "
          >
            <div class="dietOn" v-for="item in diet_analysis2" :key="item">
              <div class="time-botton">
                <img
                  src="../../assets/img/evaluaction_service_icon.png"
                  alt=""
                  
                  style="width: 15px; height: 15px"
                />
                {{ item.pName }}
              </div>

              <div style="display: flex">
                <div class="plates" style="margin-left: 10px">
                  <div class="time-type time-left-color">早餐</div>
                  <div class="der">
                    <div style="margin-left: 6%; padding-top: 6%">
                      <span
                        class="plates-top-img"
                        v-for="breakfast in item.早餐"
                        :key="breakfast"
                        ><img
                        
                          :src="
                            'http://' + baseUrl + '/' + breakfast.meal_image
                          "
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="earlier in item.早点"
                        :key="earlier"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + earlier.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>
                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      早餐7:00:
                      <span v-for="breakfast in item.早餐" :key="breakfast">
                        <o class="foodsNames">{{ breakfast.food_name }}</o>
                        重量:{{ breakfast.weight }}g;
                      </span>
                    </div>
                    <div>
                      早点10:00:
                      <span v-for="earlier in item.早点" :key="earlier">
                        <o class="foodsNames">{{ earlier.food_name }}</o>
                        重量:{{ earlier.weight }}g;
                      </span>
                    </div>
                  </div>
                </div>

                <div class="plates">
                  <div class="time-type time-common-color">午餐</div>
                  <div class="der">
                    <div style="">
                      <span
                        class="plates-top-img"
                        v-for="lunch in item.午餐"
                        :key="lunch"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + lunch.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="noon in item.午点"
                        :key="noon"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + noon.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>

                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      午餐12:00:
                      <span v-for="lunch in item.午餐" :key="lunch">
                        <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{
                          lunch.weight
                        }}g;
                      </span>
                    </div>
                    <div>
                      午点15:00:
                      <span v-for="noon in item.午点" :key="noon">
                        <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{
                          noon.weight
                        }}g;
                      </span>
                    </div>
                  </div>
                </div>

                <div class="plates">
                  <div class="time-type time-right-color">晚餐</div>
                  <div class="der">
                    <div style="margin-left: 6%; padding-top: 6%">
                      <span
                        class="plates-top-img"
                        v-for="dinner in item.晚餐"
                        :key="dinner"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + dinner.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                      <span
                        class="plates-top-img"
                        v-for="late in item.晚点"
                        :key="late"
                        ><img
                        
                          :src="'http://' + baseUrl + '/' + late.meal_image"
                          alt=""
                          style="width: 100%; height: 100%"
                      /></span>
                    </div>
                  </div>

                  <div class="platesFoods">
                    <div>大小：{{ item.multiple }}倍</div>
                    <div>
                      晚餐18:00:
                      <span v-for="dinner in item.晚餐" :key="dinner">
                        <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{
                          dinner.weight
                        }}g;
                      </span>
                    </div>
                    <div>
                      晚点21:00:
                      <span v-for="late in item.晚点" :key="late">
                        <o class="foodsNames">{{ late.food_name }}</o> 重量:{{
                          late.weight
                        }}g;
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 食物选择建议 -->

          <div
            style="
              width: 98%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/24.png"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              食物选择建议
            </div>
          </div>
          <div
            style="
              padding: 10px 10px;
              border: 2px solid #09a578;
              width: 97%;
              min-height: 500px;
              margin-top: 5px;
            "
          >
            <div v-for="(item, index) in pagoda" :key="index">
              {{
                proposal.filter((ite, index) => {
                  return ite.food_product_id == item.food_product_id;
                })[0] == undefined
                  ? ""
                  : item.title
              }}
              <div>
                <div v-if="item.product_energy < item.systam_down">
                  {{
                    proposal.filter((ite, index) => {
                      return ite.food_product_id == item.food_product_id;
                    })[0] == undefined
                      ? ""
                      : proposal.filter((ite, index) => {
                          return ite.food_product_id == item.food_product_id;
                        })[0].content
                  }}
                </div>
                <div v-if="item.product_energy > item.systam_up">
                  {{
                    proposal1.filter((ite, index) => {
                      return ite.food_product_id == item.food_product_id;
                    })[0] == undefined
                      ? ""
                      : proposal1.filter((ite, index) => {
                          return ite.food_product_id == item.food_product_id;
                        })[0].content
                  }}
                </div>
                <div
                  v-if="
                    item.product_energy >= item.systam_down &&
                    item.product_energy <= item.systam_up
                  "
                >
                  {{
                    proposal2.filter((ite, index) => {
                      return ite.food_product_id == item.food_product_id;
                    })[0] == undefined
                      ? ""
                      : proposal2.filter((ite, index) => {
                          return ite.food_product_id == item.food_product_id;
                        })[0].content
                  }}
                </div>
              </div>
            </div>
          </div>

          <div></div>
          <!-- 生长发育曲线图 -->
          <div style="display: flex;margin-top:300px;">
            <!-- <div style="display: flex; page-break-before: always"> -->
            <div
              style="
                width: 97%;
                background-color: #2ab28b;
                height: 100px;
                text-align: center;
                line-height: 100px;
              "
            >
              <span style="font-size: 30px; font-weight: bold; color: #ffffff"
                >儿童</span
              ><span style="font-size: 30px; color: #666666; margin-left: 20px"
                >生长发育曲线图</span
              >
            </div>
            <div style="height: 100px; width: 40%; background-color: #2ab28b">
            </div>
          </div>
          <div
            style="
              display: flex;
              border: 2px solid #09a578;
              margin-top: 10px;
              width: 99%;
            "
          >
            <div id="myChart1" :style="{ width: '33%', height: '550px' }"></div>
            <div id="myChart2" :style="{ width: '33%', height: '550px' }"></div>
            <div id="myChart3" :style="{ width: '33%', height: '550px' }"></div>
          </div>
          <!-- 孕期营养处方 -->
          <div style="display: flex; margin-top: 10px">
            <!-- <div style="width: 100%;background-color:#2ab28b;height: 100px;text-align: center;line-height: 100px; " >
              <span style="font-size: 30px; font-weight: bold; color: #ffffff" >儿童</span><span style="font-size: 30px; color: #666666; margin-left: 20px" >营养处方报告</span>
            </div> -->
            <!-- <div style="display: flex; width: 100%;margin-top:1000px;"> -->
              <div style="display: flex; width: 100%; page-break-before: always">
              <div
                style="
                  width: 60%;
                  background-color: #2ab28b;
                  height: 100px;
                  text-align: center;
                  line-height: 100px;
                "
              >
                <span style="font-size: 30px; font-weight: bold; color: #ffffff"
                  >儿童</span
                ><span
                  style="font-size: 30px; color: #666666; margin-left: 20px"
                  >营养处方报告</span
                >
              </div>
              <div style="height: 100px; width: 40%; background-color: #2ab28b">
              </div>
            </div>
          </div>
          <!-- 运动处方 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/26.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              喂养建议
            </div>
          </div>
          <div
            style="
              width: 97%;
              border: 2px solid #09a578;
              min-height: 100px;
              margin-top: 10px;
              padding: 10px 10px;
            "
          >
            <textarea
              name=""
              id=""
              cols="30"
              rows="10"
              style="width: 100%; border: none; resize: none; outline: none"
              v-model="FeedingRecommendations"
            ></textarea>
          </div>
          <!-- 评估指导 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/27.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              营养建议
            </div>
          </div>
          <div
            style="
              width: 97%;
              border: 2px solid #09a578;
              min-height: 100px;
              margin-top: 10px;
              padding: 10px 10px;
            "
          >
            <textarea
              name=""
              id=""
              cols="30"
              rows="10"
              style="width: 100%; border: none; resize: none; outline: none"
              v-model="NutritionRecommendations"
            ></textarea>
          </div>
          <!-- 医生建议 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/27.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              医生建议
            </div>
          </div>
          <div
            style="
              width: 97%;
              border: 2px solid #09a578;
              min-height: 100px;
              margin-top: 20px;
              padding: 10px 10px;
            "
          >
            <textarea
              name=""
              id=""
              cols="30"
              rows="10"
              style="width: 100%; border: none; resize: none; outline: none"
              v-model="DoctorRecommendations"
            ></textarea>
          </div>
          <!-- 复诊预约 -->
          <div
            style="
              width: 100%;
              height: 40px;
              background-color: rgb(42, 178, 139);
              margin-top: 10px;
              display: flex;
            "
          >
            <div>
              <img src="../../assets/img/27.jpg"  style="height: 40px" alt="" />
            </div>
            <div
              style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              "
            >
              复诊预约
            </div>
          </div>
          <div
            style="
              width: 30%;
              height: 40px;
              border: 2px solid #09a578;
              margin-top: 20px;
              margin-bottom: 20px;
            "
          >
            <div
              style="
                width: 37%;
                line-height: 40px;
                background-color: rgb(42, 178, 139);
                color: #fff;
                height: 100%;
                text-align: center;
                border-right: 2px solid #09a578;
              "
            >
              医师签字
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
     

  </div>
</template>

<script setup>
import { defineComponent, onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import * as api from "../../api/loginHttp";
import http, { baseUrl } from "../../utils/http";
import Header from "../common/Header.vue";
import Drawer from "../common/Drawer.vue";
import Childcomposition from "../common/Childcomposition.vue";
import Childdietary from "../common/Childdietary.vue";
import { useRoute, useRouter } from "vue-router";
import PrintJS from "print-js";
import * as echarts from "echarts";
import { ElNotification } from "element-plus";
import ChildViewprint from "../common/ChildViewPrint.vue";
import ChildViewDietary from "../common/ChildViewdietarys.vue";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";

const router = useRouter();
const onBmishow = ref(1);
const route = useRoute();
const groupId = ref();
const id = ref();
const labName = ref();
const reportId = ref();
const printId = ref();
const myChart = ref();
const myChart1 = ref();
const myChart2 = ref();
const proposal = ref({});
const proposal1 = ref({});
const proposal2 = ref({});

const energys = ref({});
const proteins = ref({});
const fats = ref({});
const carbohydrates = ref({});
const calciums = ref({});
const sodiums = ref({});
const magnesiums = ref({});
const irons = ref({});
const zincs = ref({});
const seleniums = ref({});
const vitamin_as = ref({});
const vitamin_es = ref({});
const vitamin_b1s = ref({});
const vitamin_b2s = ref({});
const vitamin_cs = ref({});
const intake = ref({});
const username = ref();
const guardian = ref();
const birthStatus = ref();
const FeedingRecommendations = ref();
const NutritionRecommendations = ref();
const DoctorRecommendations = ref();

const qxty = ref();
const hospital_name = ref();
const report_time = ref();
const birth = ref();
const high_contents = ref({});
const early_intervention = ref({});
const Monitoring_content = ref({});
const contents = ref({});
const isShow = ref(true);
const readonly = ref(true);
const display = ref(false);
const diet = ref({});
const pagoda = ref({});
const principle = ref({});
const letEnergy = ref({ energy: 0, start: 0, end: 0 });
const protein = ref({ energy: 0, start: 0, end: 0 });
const fat = ref({ energy: 0, start: 0, end: 0 });
const carbohydrate = ref({ energy: 0, start: 0, end: 0 });
const calcium = ref({ energy: 0, start: 0, end: 0 });
const sodium = ref({ energy: 0, start: 0, end: 0 });
const magnesium = ref({ energy: 0, start: 0, end: 0 });
const iron = ref({ energy: 0, start: 0, end: 0 });
const zinc = ref({ energy: 0, start: 0, end: 0 });
const selenium = ref({ energy: 0, start: 0, end: 0 });
const vitamin_a = ref({ energy: 0, start: 0, end: 0 });
const vitamin_e = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b1 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b2 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_c = ref({ energy: 0, start: 0, end: 0 });
const diet_analysis = ref({});
const diet_analysis1 = ref({});
const diet_analysis2 = ref({});
const kcalType = ref(2);
const data = ref();
const form = ref({
  elText: "",
  elTextTwo: "",
  elTextThree: "",
});

const types = ref([
  "基本信息",
  "体成分分析",
  "膳食营养分析",
  "儿童生长发育曲线图",
  "喂养习惯报告",
  "营养处方报告",
]);
const typeActive = ref(-1);

const fetchData = async () => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId;
    id.value = route.params.id;
    reportId.value = route.params.reportId;

    username.value = route.params.username;
    guardian.value = route.params.guardian;
    birthStatus.value = route.params.birth;

    if (username.value && guardian.value && birthStatus.value) {
      isShow.value = false;
    }

    if (groupId.value == 3) {
      labName.value = "婴幼儿营养测评";
    } else if (groupId.value == 5) {
      labName.value = "孕产妇营养测评";
    } else if (groupId.value == 6) {
      labName.value = "成年人营养测评";
    } else if (groupId.value == 7) {
      labName.value = "慢性病营养测评";
    } else if (groupId.value == 8) {
      labName.value = "团体营养测评";
    }
  }
  http
    .get(
      "api/archives/getGenerateStatus?id=" +
        id.value +
        "&reportId=" +
        reportId.value
    )
    .then((res) => {
      // http.get('api/archives/generate?id=' + id.value + '&reportId=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
      //   if (res.data.code === 0) {
      //     ElMessage.error(res.data.msg)
      //     return false;
      //   }
      // })
    });

  http
    .get(
      "api/archives/viewReportMember?id=" +
        reportId.value +
        "&username=" +
        username.value +
        "&guardian=" +
        guardian.value +
        "&birth=" +
        birthStatus.value
    )
    .then((res) => {
      localStorage.setItem("userinfo", res.data.data.contents);
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
        return false;
      } else {
      }
      if (res.data.data.is_high == 1) {
        display.value = true;
      } else {
        display.value = false;
      }

      if (res.data.data.feed_advice) {
        FeedingRecommendations.value = res.data.data.feed_advice;
      }
      if (res.data.data.nutrition_advice) {
        NutritionRecommendations.value = res.data.data.nutrition_advice;
      }
      if (res.data.data.doctor_advice) {
        DoctorRecommendations.value = res.data.data.doctor_advice;
      }

      birth.value = $getTimes(res.data.data.contents.birth);
      contents.value = res.data.data.contents;
      report_time.value = res.data.data.times;

      // if (res.data.data.feed_advice != '' && res.data.data.feed_advice != null) {
      //   form.value.elText = res.data.data.feed_advice;
      // } else {
      //   form.value.elText = '当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对儿童的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n' +
      //     '给儿童烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n' +
      //     '每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。';
      // }

      // if (res.data.data.nutrition_advice != '' && res.data.data.nutrition_advice != null) {
      //   form.value.elTextTwo = res.data.data.nutrition_advice;
      // } else {
      //   form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
      //     '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      //   if (contents._rawValue.hair_value != '' || contents._rawValue.oralCavity_value != '' || contents._rawValue.neck_value != '' || contents._rawValue.Neuropathy_value != '' || contents._rawValue.symptoms_value != '') {
      //     form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
      //       '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      //   } else if (contents._rawValue.eye_value != '') {
      //     form.value.elTextTwo = '平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n' +
      //       '长期摄入不足是导致维生素A缺乏的主要原因，儿童维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。';
      //   } else if (contents._rawValue.skin_value != '') {
      //     form.value.elTextTwo = '谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n' +
      //       '富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以儿童日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。';
      //   } else if (contents._rawValue.sign_value != '') {
      //     form.value.elTextTwo = '足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障儿童生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致儿童正餐不按量食用。\n' +
      //       '营养不良的儿童，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。';
      //   } else if (contents._rawValue.sign_value != '') {
      //     form.value.elTextTwo = '奶和奶制品是儿童钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。'
      //   }
      // }

      // form.value.elTextThree = res.data.data.doctor_advice;
      // setTimeout(() => {
      //   print("pdfDom1");
      // }, 2000);
    });

  let params = {
    groupId: groupId.value,
    id: id.value,
    reportId: reportId.value,
    username: username.value,
    guardian: guardian.value,
    birth: birth.value,
  };
  const data = await api.energy(params);

  if (data.data.code == 0) {
    ElMessage.error(data.data.msg);
    return false;
    await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
  }

  if (!data.data.data.diet_analysis) {
    ElMessage.error(data.data.msg);
    return false;
    await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
  }

  for (let i = 0; i < data.data.data.diet_analysis.length; i++) {
    switch (i) {
      case 0:
        data.data.data.diet_analysis[i]["pName"] = "周一";
        break;
      case 1:
        data.data.data.diet_analysis[i]["pName"] = "周二";
        break;
      case 2:
        data.data.data.diet_analysis[i]["pName"] = "周三";
        break;
      case 3:
        data.data.data.diet_analysis[i]["pName"] = "周四";
        break;
      case 4:
        data.data.data.diet_analysis[i]["pName"] = "周五";
        break;
      case 5:
        data.data.data.diet_analysis[i]["pName"] = "周六";
        break;
      case 6:
        data.data.data.diet_analysis[i]["pName"] = "周日";
        break;
    }
  }

  diet_analysis.value = data.data.data.diet_analysis.filter(
    (item, index) => index < 3
  );
  diet_analysis1.value = data.data.data.diet_analysis.filter(
    (item, index) => index > 2 && index < 6
  );
  diet_analysis2.value = data.data.data.diet_analysis.filter(
    (item, index) => index > 5
  );

  for (let i = 0; i < data.data.data.diet.length; i++) {
    if (
      parseInt(data.data.data.diet[i]["energy"]) !==
      parseInt(data.data.data.diet[i]["energy"])
    ) {
      data.data.data.diet[i]["energy"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["protein"]) !==
      parseInt(data.data.data.diet[i]["protein"])
    ) {
      data.data.data.diet[i]["protein"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["fat"]) !==
      parseInt(data.data.data.diet[i]["fat"])
    ) {
      data.data.data.diet[i]["fat"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["carbohydrate"]) !==
      parseInt(data.data.data.diet[i]["carbohydrate"])
    ) {
      data.data.data.diet[i]["carbohydrate"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["calcium"]) !==
      parseInt(data.data.data.diet[i]["calcium"])
    ) {
      data.data.data.diet[i]["calcium"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["sodium"]) !==
      parseInt(data.data.data.diet[i]["sodium"])
    ) {
      data.data.data.diet[i]["sodium"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["magnesium"]) !==
      parseInt(data.data.data.diet[i]["magnesium"])
    ) {
      data.data.data.diet[i]["magnesium"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["iron"]) !==
      parseInt(data.data.data.diet[i]["iron"])
    ) {
      data.data.data.diet[i]["iron"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["zinc"]) !==
      parseInt(data.data.data.diet[i]["zinc"])
    ) {
      data.data.data.diet[i]["zinc"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["selenium"]) !==
      parseInt(data.data.data.diet[i]["selenium"])
    ) {
      data.data.data.diet[i]["selenium"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["vitamin_a"]) !==
      parseInt(data.data.data.diet[i]["vitamin_a"])
    ) {
      data.data.data.diet[i]["vitamin_a"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["vitamin_e"]) !==
      parseInt(data.data.data.diet[i]["vitamin_e"])
    ) {
      data.data.data.diet[i]["vitamin_e"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["vitamin_b1"]) !==
      parseInt(data.data.data.diet[i]["vitamin_b1"])
    ) {
      data.data.data.diet[i]["vitamin_b1"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["vitamin_b2"]) !==
      parseInt(data.data.data.diet[i]["vitamin_b2"])
    ) {
      data.data.data.diet[i]["vitamin_b2"] = 0;
    }
    if (
      parseInt(data.data.data.diet[i]["vitamin_c"]) !==
      parseInt(data.data.data.diet[i]["vitamin_c"])
    ) {
      data.data.data.diet[i]["vitamin_c"] = 0;
    }
    letEnergy._value.energy =
      letEnergy._value.energy + parseInt(data.data.data.diet[i]["energy"]);

    protein._value.energy =
      protein._value.energy + parseInt(data.data.data.diet[i]["protein"]);
    fat._value.energy =
      fat._value.energy + parseInt(data.data.data.diet[i]["fat"]);
    carbohydrate._value.energy =
      carbohydrate._value.energy +
      parseInt(data.data.data.diet[i]["carbohydrate"]);
    calcium._value.energy =
      calcium._value.energy + parseInt(data.data.data.diet[i]["calcium"]);
    sodium._value.energy =
      sodium._value.energy + parseInt(data.data.data.diet[i]["sodium"]);
    magnesium._value.energy =
      magnesium._value.energy + parseInt(data.data.data.diet[i]["magnesium"]);
    iron._value.energy =
      iron._value.energy + parseInt(data.data.data.diet[i]["iron"]);
    zinc._value.energy =
      zinc._value.energy + parseInt(data.data.data.diet[i]["zinc"]);
    selenium._value.energy =
      selenium._value.energy + parseInt(data.data.data.diet[i]["selenium"]);
    vitamin_a._value.energy =
      vitamin_a._value.energy + parseInt(data.data.data.diet[i]["vitamin_a"]);
    vitamin_e._value.energy =
      vitamin_e._value.energy + parseInt(data.data.data.diet[i]["vitamin_e"]);
    vitamin_b1._value.energy =
      vitamin_b1._value.energy + parseInt(data.data.data.diet[i]["vitamin_b1"]);
    vitamin_b2._value.energy =
      vitamin_b2._value.energy + parseInt(data.data.data.diet[i]["vitamin_b2"]);
    vitamin_c._value.energy =
      vitamin_c._value.energy + parseInt(data.data.data.diet[i]["vitamin_c"]);
  }

  letEnergy._value.start = data.data.data.packAge[0].start_package;
  letEnergy._value.end = data.data.data.packAge[0].end_package;
  letEnergy._value.keyword = "✔ 正常";
  letEnergy._value.color = "everyBlack";

  //能量
  if (letEnergy._value.energy < letEnergy._value.start) {
    letEnergy._value.keyword = "▼ 不足";
    letEnergy._value.color = "everyRed";
    kcalType.value = 3;
  } else if (letEnergy._value.energy > letEnergy._value.end) {
    letEnergy._value.keyword = "▲ 超标";
    letEnergy._value.color = "everyOrange";
    kcalType.value = 1;
  }

  //蛋白质
  protein._value.start = data.data.data.packAge[1].start_package;
  protein._value.end = data.data.data.packAge[1].end_package;
  protein._value.keyword = "✔ 正常";
  protein._value.color = "everyBlack";
  if (protein._value.energy < protein._value.start) {
    protein._value.keyword = "▼ 不足";
    protein._value.color = "everyRed";
  } else if (protein._value.energy > protein._value.end) {
    protein._value.keyword = "▲ 超标";
    protein._value.color = "everyOrange";
  }
  //脂肪
  fat._value.start = data.data.data.packAge[2].start_package;
  fat._value.end = data.data.data.packAge[2].end_package;
  fat._value.keyword = "✔ 正常";
  fat._value.color = "everyBlack";
  if (fat._value.energy < fat._value.start) {
    fat._value.keyword = "▼ 不足";
    fat._value.color = "everyRed";
  } else if (fat._value.energy > fat._value.end) {
    fat._value.keyword = "▲ 超标";
    fat._value.color = "everyOrange";
  }
  //碳水化合物
  carbohydrate._value.start = data.data.data.packAge[3].start_package;
  carbohydrate._value.end = data.data.data.packAge[3].end_package;
  carbohydrate._value.keyword = "✔ 正常";
  carbohydrate._value.color = "everyBlack";
  if (carbohydrate._value.energy < carbohydrate._value.start) {
    carbohydrate._value.keyword = "▼ 不足";
    carbohydrate._value.color = "everyRed";
  } else if (carbohydrate._value.energy > carbohydrate._value.end) {
    carbohydrate._value.keyword = "▲ 超标";
    carbohydrate._value.color = "everyOrange";
  }

  //钙
  calcium._value.start = data.data.data.packAge[4].start_package;
  calcium._value.end = data.data.data.packAge[4].end_package;
  calcium._value.keyword = "✔ 正常";
  calcium._value.color = "everyBlack";
  if (calcium._value.energy < calcium._value.start) {
    calcium._value.keyword = "▼ 不足";
    calcium._value.color = "everyRed";
  } else if (calcium._value.energy > calcium._value.end) {
    calcium._value.keyword = "▲ 超标";
    calcium._value.color = "everyOrange";
  }
  //钠
  sodium._value.start = data.data.data.packAge[5].start_package;
  sodium._value.end = data.data.data.packAge[5].end_package;
  sodium._value.keyword = "✔ 正常";
  sodium._value.color = "everyBlack";
  if (sodium._value.energy < sodium._value.start) {
    sodium._value.keyword = "▼ 不足";
    sodium._value.color = "everyRed";
  } else if (sodium._value.energy > sodium._value.end) {
    sodium._value.keyword = "▲ 超标";
    sodium._value.color = "everyOrange";
  }
  //镁
  magnesium._value.start = data.data.data.packAge[6].start_package;
  magnesium._value.end = data.data.data.packAge[6].end_package;
  magnesium._value.keyword = "✔ 正常";
  magnesium._value.color = "everyBlack";
  if (magnesium._value.energy < magnesium._value.start) {
    magnesium._value.keyword = "▼ 不足";
    magnesium._value.color = "everyRed";
  } else if (magnesium._value.energy > magnesium._value.end) {
    magnesium._value.keyword = "▲ 超标";
    magnesium._value.color = "everyOrange";
  }
  //铁
  iron._value.start = data.data.data.packAge[7].start_package;
  iron._value.end = data.data.data.packAge[7].end_package;
  iron._value.keyword = "✔ 正常";
  iron._value.color = "everyBlack";
  if (iron._value.energy < iron._value.start) {
    iron._value.keyword = "▼ 不足";
    iron._value.color = "everyRed";
  } else if (iron._value.energy > iron._value.end) {
    iron._value.keyword = "▲ 超标";
    iron._value.color = "everyOrange";
  }
  //锌
  zinc._value.start = data.data.data.packAge[8].start_package;
  zinc._value.end = data.data.data.packAge[8].end_package;
  zinc._value.keyword = "✔ 正常";
  zinc._value.color = "everyBlack";
  if (zinc._value.energy < zinc._value.start) {
    zinc._value.keyword = "▼ 不足";
    zinc._value.color = "everyRed";
  } else if (zinc._value.energy > zinc._value.end) {
    zinc._value.keyword = "▲ 超标";
    zinc._value.color = "everyOrange";
  }
  //硒
  selenium._value.start = data.data.data.packAge[9].start_package;
  selenium._value.end = data.data.data.packAge[9].end_package;
  selenium._value.keyword = "✔ 正常";
  selenium._value.color = "everyBlack";
  if (selenium._value.energy < selenium._value.start) {
    selenium._value.keyword = "▼ 不足";
    selenium._value.color = "everyRed";
  } else if (selenium._value.energy > selenium._value.end) {
    selenium._value.keyword = "▲ 超标";
    selenium._value.color = "everyOrange";
  }
  // 维生素A
  vitamin_a._value.start = data.data.data.packAge[10].start_package;
  vitamin_a._value.end = data.data.data.packAge[10].end_package;
  vitamin_a._value.keyword = "✔ 正常";
  vitamin_a._value.color = "everyBlack";
  if (vitamin_a._value.energy < vitamin_a._value.start) {
    vitamin_a._value.keyword = "▼ 不足";
    vitamin_a._value.color = "everyRed";
  } else if (vitamin_a._value.energy > vitamin_a._value.end) {
    vitamin_a._value.keyword = "▲ 超标";
    vitamin_a._value.color = "everyOrange";
  }
  //维生素E
  vitamin_e._value.start = data.data.data.packAge[11].start_package;
  vitamin_e._value.end = data.data.data.packAge[11].end_package;
  vitamin_e._value.keyword = "✔ 正常";
  vitamin_e._value.color = "everyBlack";
  if (vitamin_e._value.energy < vitamin_e._value.start) {
    vitamin_e._value.keyword = "▼ 不足";
    vitamin_e._value.color = "everyRed";
  } else if (vitamin_e._value.energy > vitamin_e._value.end) {
    vitamin_e._value.keyword = "▲ 超标";
    vitamin_e._value.color = "everyOrange";
  }
  //维生素B1
  vitamin_b1._value.start = data.data.data.packAge[12].start_package;
  vitamin_b1._value.end = data.data.data.packAge[12].end_package;
  vitamin_b1._value.keyword = "✔ 正常";
  vitamin_b1._value.color = "everyBlack";
  if (vitamin_b1._value.energy < vitamin_b1._value.start) {
    vitamin_b1._value.keyword = "▼ 不足";
    vitamin_b1._value.color = "everyRed";
  } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
    vitamin_b1._value.keyword = "▲ 超标";
    vitamin_b1._value.color = "everyOrange";
  }
  //维生素B2
  vitamin_b2._value.start = data.data.data.packAge[13].start_package;
  vitamin_b2._value.end = data.data.data.packAge[13].end_package;
  vitamin_b2._value.keyword = "✔ 正常";
  vitamin_b2._value.color = "everyBlack";
  if (vitamin_b2._value.energy < vitamin_b2._value.start) {
    vitamin_b2._value.keyword = "▼ 不足";
    vitamin_b2._value.color = "everyRed";
  } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
    vitamin_b2._value.keyword = "▲ 超标";
    vitamin_b2._value.color = "everyOrange";
  }
  //维生素C
  vitamin_c._value.start = data.data.data.packAge[14].start_package;
  vitamin_c._value.end = data.data.data.packAge[14].end_package;
  vitamin_c._value.keyword = "✔ 正常";
  vitamin_c._value.color = "everyBlack";
  if (vitamin_c._value.energy < vitamin_c._value.start) {
    vitamin_c._value.keyword = "▼ 不足";
    vitamin_c._value.color = "everyRed";
  } else if (vitamin_c._value.energy > vitamin_c._value.end) {
    vitamin_c;
    vitamin_c._value.keyword = "▲ 超标";
    vitamin_c._value.color = "everyOrange";
  }
};

onMounted(() => {
  setTimeout(()=>{
    let eleW = document.getElementById('pdfDom1').offsetWidth// 获得该容器的宽
    //   let eleH = ele.offsetHeight // 获得该容器的高
    let eleH = document.getElementById('pdfDom1').scrollHeight// 获得该容器的高
    let eleOffsetTop = document.getElementById('pdfDom1').offsetTop// 获得该容器到文档顶部的距离
    let eleOffsetLeft = document.getElementById('pdfDom1').offsetLeft// 获得该容器到文档最左的距离

    var canvas = document.createElement("canvas")
    var abs = 0

    let win_in = document.documentElement.clientWidth || document.body.clientWidth// 获得当前可视窗口的宽度（不包含滚动条）
    let win_out = window.innerWidth// 获得当前窗口的宽度（包含滚动条）

    if (win_out>win_in) {
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in) / 2// 获得滚动条宽度的一半
    }
    canvas.width = eleW * 2// 将画布宽&&高放大两倍
    canvas.height = eleH * 2

    var context = canvas.getContext("2d")
    context.scale(3, 3) // 增强图片清晰度
    context.translate(-eleOffsetLeft - abs, -eleOffsetTop)

    // document.getElementById('pdfDom').style.display="block";
    // document.getElementById('pdfDom').style.backgroundColor="#FFFFFF";
    html2Canvas(document.getElementById('pdfDom1'), {
        useCORS:true,//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
        scale: 1,
    }).then(canvas=> {
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89 // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
        //未生成pdf的html页面高度
        var leftHeight = contentHeight
        //页面偏移
        var position = 0

        //a4纸的尺寸[595.28,841.89],单位像素，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28
        var imgHeight = (595.28 / contentWidth) * contentHeight
        var pageData = canvas.toDataURL("image/jpeg");
        var pdf = JsPDF("", "pt", "a4")
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight<pageHeight) {
            //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            pdf.addImage(pageData, "JPEG", 5, 0, imgWidth, imgHeight)
            // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        } else {
            // 分页
            while (leftHeight>0) {
                pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= 841.89
                //避免添加空白页
                if (leftHeight>0) {
                    pdf.addPage()
                }
            }
        }
        // pdf.save('儿童营养测评报告' + ".pdf")
        console.log(pageData)
        groupId.value = route.params.groupId;
        id.value = route.params.id;
        reportId.value = route.params.reportId;
        username.value = route.params.username;
        guardian.value = route.params.guardian;
        birthStatus.value = route.params.birth;
        let printParam = "";
        let PrintAll = router.resolve({path:"/PrintViewAlls/" + groupId.value +"/" + id.value +"/" +reportId.value + printParam,});
         const formfeed=()=>{
           setTimeout(() => window.open(PrintAll.href, "_blank"), 1000);
         }
         formfeed();
    })
  },2000);
  fetchData();
});

const onKeep = async () => {
  let params = {
    elText: FeedingRecommendations.value,
    elTextTwo: NutritionRecommendations.value,
    elTextThree: DoctorRecommendations.value,
  };
  params["reportId"] = reportId.value;
  const res = await api.setAdvice(params);
  console.log(res.data, "111");
  if (res.data.code === 1) {
    ElNotification({
      title: "建议保存成功",
      message: res.data.msg,
      type: "success",
    });
    return false;
  } else {
    ElNotification({
      title: "建议保存失败",
      message: res.data.msg,
      type: "error",
    });
    return false;
  }
};

function $getTimes(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

const onClickPrint = () => {
  let printParam = "";
  if (username.value && guardian.value && birthStatus.value) {
    printParam =
      "/" + username.value + "/" + guardian.value + "/" + birthStatus.value;
  }
  if (typeActive.value === "全部") {
    let PrintAll = router.resolve({
      path:
        "/PrintViewAll/" +
        groupId.value +
        "/" +
        id.value +
        "/" +
        reportId.value +
        printParam,
    });
    window.open(PrintAll.href, "_blank");
  } else {
    switch (typeActive.value) {
      case "基本信息":
        let PrintMember = router.resolve({
          path:
            "/PrintMember/" +
            groupId.value +
            "/" +
            id.value +
            "/" +
            reportId.value +
            printParam,
        });
        window.open(PrintMember.href, "_blank");
        break;
      case "体成分分析":
        let PrintAnalysis = router.resolve({
          path:
            "/PrintAnalysis/" +
            groupId.value +
            "/" +
            id.value +
            "/" +
            reportId.value +
            printParam,
        });
        window.open(PrintAnalysis.href, "_blank");
        break;
      case "膳食营养分析":
        let PrintComposition = router.resolve({
          path:
            "/PrintComposition/" +
            groupId.value +
            "/" +
            id.value +
            "/" +
            reportId.value +
            printParam,
        });
        window.open(PrintComposition.href, "_blank");
        break;
      case "儿童生长发育曲线图":
        let PrintDiagram = router.resolve({
          path:
            "/PrintDiagram/" +
            groupId.value +
            "/" +
            id.value +
            "/" +
            reportId.value +
            printParam,
        });
        window.open(PrintDiagram.href, "_blank");
        break;
      case "喂养习惯报告":
        let PrintFeedhabits = router.resolve({
          path:
            "/PrintFeedhabits/" +
            groupId.value +
            "/" +
            id.value +
            "/" +
            reportId.value +
            printParam,
        });
        window.open(PrintFeedhabits.href, "_blank");
        break;
      case "营养处方报告":
        let PrintPrescription = router.resolve({
          path:
            "/PrintPrescription/" +
            groupId.value +
            "/" +
            id.value +
            "/" +
            reportId.value +
            printParam,
        });
        window.open(PrintPrescription.href, "_blank");
        break;
    }

    // print(typeActive.value)
  }
};
onMounted(() => {
  // 需要获取到element,所以是onMounted的Hook
  http
    .get(
      "api/archives/viewreport?id=" +
        reportId.value +
        "&username=" +
        username.value +
        "&guardian=" +
        guardian.value +
        "&birth=" +
        birthStatus.value
    )
    .then((res) => {
      console.log(res.data.data, "777");
      diet.value = res.data.data.diet;
      proposal.value = res.data.data.foodselection.filter((item, index) => {
        return item.up_type == 2;
      });
      proposal1.value = res.data.data.foodselection.filter((item, index) => {
        return item.up_type == 1;
      });
      proposal2.value = res.data.data.foodselection.filter((item, index) => {
        return item.up_type == 3;
      });
      data.value = res.data.data;

      // 能量
      if (letEnergy._value.energy < letEnergy.value.start) {
        principle.value = data.value.foodliving[2].content;
        // console.log(data.value.foodliving[2],'能量1')
        energys.value = data.value.foodmotion[2].content;
        if (!FeedingRecommendations.value) {
          FeedingRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 1;
            })
            .filter((item) => {
              return item.up_type == 2;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        if (!NutritionRecommendations.value) {
          NutritionRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 2;
            })
            .filter((item) => {
              return item.up_type == 2;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        if (!DoctorRecommendations.value) {
          DoctorRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 3;
            })
            .filter((item) => {
              return item.up_type == 2;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        letEnergy._value.keyword = "▼ 不足";
        letEnergy._value.color = "everyRed";
        kcalType.value = 3;
      } else if (letEnergy._value.energy > letEnergy.value.end) {
        principle.value = data.value.foodliving[1].content;
        energys.value = data.value.foodmotion[0].content;
        // console.log(data.value.foodliving[1],'能量1')
        if (!FeedingRecommendations.value) {
          FeedingRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 1;
            })
            .filter((item) => {
              return item.up_type == 1;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        if (!NutritionRecommendations.value) {
          NutritionRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 2;
            })
            .filter((item) => {
              return item.up_type == 1;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        if (!DoctorRecommendations.value) {
          DoctorRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 3;
            })
            .filter((item) => {
              return item.up_type == 1;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        letEnergy._value.keyword = "▲ 超标";
        letEnergy._value.color = "everyOrange";
        kcalType.value = 1;
      } else {
        principle.value = data.value.foodliving[0].content;
        energys.value = data.value.foodmotion[1].content;
        // console.log(data.value.foodliving[0],'能量1')
        if (!FeedingRecommendations.value) {
          FeedingRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 1;
            })
            .filter((item) => {
              return item.up_type == 3;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        if (!NutritionRecommendations.value) {
          NutritionRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 2;
            })
            .filter((item) => {
              return item.up_type == 3;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
        if (!DoctorRecommendations.value) {
          DoctorRecommendations.value = res.data.data.foodproposal
            .filter((item) => {
              return item.proposal_type == 3;
            })
            .filter((item) => {
              return item.up_type == 3;
            })[0]
            .content.replace(/<.*?>/gi, "");
        }
      }
      //  蛋白质
      if (protein._value.energy < protein._value.start) {
        proteins.value = data.value.foodmotion[5].content;
        protein._value.keyword = "▼ 不足";
        protein._value.color = "everyRed";
      } else if (protein._value.energy > protein._value.end) {
        proteins.value = data.value.foodmotion[3].content;
        protein._value.keyword = "▲ 超标";
        protein._value.color = "everyOrange";
      } else {
        proteins.value = data.value.foodmotion[4].content;
      }
      //脂肪
      if (fat._value.energy < fat._value.start) {
        fats.value = data.value.foodmotion[8].content;
        fat._value.keyword = "▼ 不足";
        fat._value.color = "everyRed";
      } else if (fat._value.energy > fat._value.end) {
        fats.value = data.value.foodmotion[6].content;
        fat._value.keyword = "▲ 超标";
        fat._value.color = "everyOrange";
      } else {
        fats.value = data.value.foodmotion[7].content;
      }
      console.log(proteins.value, "12345");
      //碳水化合物
      if (carbohydrate._value.energy < carbohydrate._value.start) {
        carbohydrates.value = data.value.foodmotion[11].content;
        carbohydrate._value.keyword = "▼ 不足";
        carbohydrate._value.color = "everyRed";
      } else if (carbohydrate._value.energy > carbohydrate._value.end) {
        carbohydrates.value = data.value.foodmotion[9].content;
        carbohydrate._value.keyword = "▲ 超标";
        carbohydrate._value.color = "everyOrange";
      } else {
        carbohydrates.value = data.value.foodmotion[10].content;
      }
      //钙
      if (calcium._value.energy < calcium._value.start) {
        calciums.value = data.value.foodmotion[14].content;
        calcium._value.keyword = "▼ 不足";
        calcium._value.color = "everyRed";
      } else if (calcium._value.energy > calcium._value.end) {
        calciums.value = data.value.foodmotion[12].content;
        calcium._value.keyword = "▲ 超标";
        calcium._value.color = "everyOrange";
      } else {
        calciums.value = data.value.foodmotion[13].content;
      }
      //钠
      if (sodium._value.energy < sodium._value.start) {
        sodiums.value = data.value.foodmotion[17].content;
        sodium._value.keyword = "▼ 不足";
        sodium._value.color = "everyRed";
      } else if (sodium._value.energy > sodium._value.end) {
        sodiums.value = data.value.foodmotion[15].content;
        sodium._value.keyword = "▲ 超标";
        sodium._value.color = "everyOrange";
      } else {
        sodiums.value = data.value.foodmotion[16].content;
      }
      //镁
      if (magnesium._value.energy < magnesium._value.start) {
        magnesiums.value = data.value.foodmotion[20].content;
        magnesium._value.keyword = "▼ 不足";
        magnesium._value.color = "everyRed";
      } else if (magnesium._value.energy > magnesium._value.end) {
        magnesiums.value = data.value.foodmotion[18].content;
        magnesium._value.keyword = "▲ 超标";
        magnesium._value.color = "everyOrange";
      } else {
        magnesiums.value = data.value.foodmotion[19].content;
      }
      //铁
      if (iron._value.energy < iron._value.start) {
        irons.value = data.value.foodmotion[23].content;
        iron._value.keyword = "▼ 不足";
        iron._value.color = "everyRed";
      } else if (iron._value.energy > iron._value.end) {
        irons.value = data.value.foodmotion[21].content;
        iron._value.keyword = "▲ 超标";
        iron._value.color = "everyOrange";
      } else {
        irons.value = data.value.foodmotion[22].content;
      }
      //锌
      if (zinc._value.energy < zinc._value.start) {
        zincs.value = data.value.foodmotion[26].content;
        zinc._value.keyword = "▼ 不足";
        zinc._value.color = "everyRed";
      } else if (zinc._value.energy > zinc._value.end) {
        zincs.value = data.value.foodmotion[24].content;
        zinc._value.keyword = "▲ 超标";
        zinc._value.color = "everyOrange";
      } else {
        zincs.value = data.value.foodmotion[25].content;
      }
      //硒
      if (selenium._value.energy < selenium._value.start) {
        seleniums.value = data.value.foodmotion[29].content;
        selenium._value.keyword = "▼ 不足";
        selenium._value.color = "everyRed";
      } else if (selenium._value.energy > selenium._value.end) {
        seleniums.value = data.value.foodmotion[27].content;
        selenium._value.keyword = "▲ 超标";
        selenium._value.color = "everyOrange";
      } else {
        seleniums.value = data.value.foodmotion[28].content;
      }
      //维生素A
      if (vitamin_a._value.energy < vitamin_a._value.start) {
        vitamin_as.value = data.value.foodmotion[32].content;
        vitamin_a._value.keyword = "▼ 不足";
        vitamin_a._value.color = "everyRed";
      } else if (vitamin_a._value.energy > vitamin_a._value.end) {
        vitamin_as.value = data.value.foodmotion[30].content;
        vitamin_a._value.keyword = "▲ 超标";
        vitamin_a._value.color = "everyOrange";
      } else {
        vitamin_as.value = data.value.foodmotion[31].content;
      }
      //维生素E
      if (vitamin_e._value.energy < vitamin_e._value.start) {
        vitamin_es.value = data.value.foodmotion[35].content;
        vitamin_e._value.keyword = "▼ 不足";
        vitamin_e._value.color = "everyRed";
      } else if (vitamin_e._value.energy > vitamin_e._value.end) {
        vitamin_es.value = data.value.foodmotion[33].content;
        vitamin_e._value.keyword = "▲ 超标";
        vitamin_e._value.color = "everyOrange";
      } else {
        vitamin_es.value = data.value.foodmotion[34].content;
      }
      //维生素B1
      if (vitamin_b1._value.energy < vitamin_b1._value.start) {
        vitamin_b1s.value = data.value.foodmotion[38].content;
        vitamin_b1._value.keyword = "▼ 不足";
        vitamin_b1._value.color = "everyRed";
      } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
        vitamin_b1s.value = data.value.foodmotion[36].content;
        vitamin_b1._value.keyword = "▲ 超标";
        vitamin_b1._value.color = "everyOrange";
      } else {
        vitamin_b1s.value = data.value.foodmotion[37].content;
      }
      //维生素B2
      if (vitamin_b2._value.energy < vitamin_b2._value.start) {
        vitamin_b2s.value = data.value.foodmotion[41].content;
        vitamin_b2._value.keyword = "▼ 不足";
        vitamin_b2._value.color = "everyRed";
      } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
        vitamin_b2s.value = data.value.foodmotion[39].content;
        vitamin_b2._value.keyword = "▲ 超标";
        vitamin_b2._value.color = "everyOrange";
      } else {
        vitamin_b2s.value = data.value.foodmotion[40].content;
      }
      //维生素C
      if (vitamin_c._value.energy < vitamin_c._value.start) {
        vitamin_cs.value = data.value.foodmotion[44].content;
        vitamin_c._value.keyword = "▼ 不足";
        vitamin_c._value.color = "everyRed";
      } else if (vitamin_c._value.energy > vitamin_c._value.end) {
        vitamin_cs.value = data.value.foodmotion[42].content;
        vitamin_c._value.keyword = "▲ 超标";
        vitamin_c._value.color = "everyOrange";
      } else {
        vitamin_cs.value = data.value.foodmotion[43].content;
      }

      console.log(res.data.data.high_contents, "adadada");
      if (res.data.data.high_contents != null) {
        early_intervention.value =
          res.data.data.high_contents.intervention_one +
          res.data.data.high_contents.intervention_two +
          res.data.data.high_contents.intervention_three;
        Monitoring_content.value =
          res.data.data.high_contents.family_1 +
          res.data.data.high_contents.family_2 +
          res.data.data.high_contents.family_3 +
          res.data.data.high_contents.family_4 +
          res.data.data.high_contents.family_5 +
          res.data.data.high_contents.family_6 +
          res.data.data.high_contents.family_7 +
          res.data.data.high_contents.family_8 +
          res.data.data.high_contents.family_9 +
          res.data.data.high_contents.family_10 +
          res.data.data.high_contents.family_11 +
          res.data.data.high_contents.family_12 +
          res.data.data.high_contents.family_13;
        high_contents.value = res.data.data.high_contents;
      }

      hospital_name.value = res.data.data.hospital_name;

      pagoda.value = res.data.data.pagoda;

      // proposal.filter((ite,index)=>{
      //     return ite.food_product_id==pagoda.food_product_id

      // })

      // principle.value = res.data.data.foodliving
      intake.value = res.data.data.foodmotion;

      let color = ["#3EA4AA"];
      let color1 = ["#D0443B", "#3EA4AA"];
      let color2 = ["#D0443B", "#3EA4AA"];
      let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
      var arr = [];
      var arr2 = [];
      var parr = res.data.data.contents.primaryHeight;
      if (res.data.data.contents.primaryHeight != undefined) {
        for (let i = 0; i < parr.length; i++) {
          arr.push(parr[i].content);
          arr2.push(parr[i].month);
        }
      }

      var arr1 = [];
      var arr3 = [];
      var parr1 = res.data.data.contents.primaryWeight;
      console.log(res.data.data, "wuhu");
      if (res.data.data.contents.primaryWeight != undefined) {
        for (let i = 0; i < parr1.length; i++) {
          arr1.push(parr1[i].content);
          arr3.push(parr1[i].month);
        }
      }

      var myChart = echarts.init(document.getElementById("myChart1"));
      myChart.value = myChart;
      myChart.setOption({
        backgroundColor: "#fff",
        color: color,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "次数",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "BMI值",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "dotted",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  "rgba(83,148,208,0.15)",
                  "rgba(103,194,58,0.15)",
                  "rgba(226,203,80,0.15)",
                  "rgba(226,115,80,0.15)",
                ],
              },
            },
          },
        ],
        series: [
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumBmi,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      console.log(res.data.data.contents, "124");
      var myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        backgroundColor: "#fff",
        color: color1,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: arr2,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "身高",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
          },
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[0],
              },
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr,
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumHeight,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });

      var myChart2 = echarts.init(document.getElementById("myChart3"));
      myChart2.value = myChart2;
      myChart2.setOption({
        backgroundColor: "#fff",
        color: color2,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: arr3,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "体重",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
          },
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[0],
              },
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "white",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr1,
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumWeight,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    });
});

// const print = (el) => {
//   PrintJS({
//     printable: el,
//     type: 'html',
//     header: null,
//     targetStyles: ['*'],
//     style: "@page {margin:0 10mm}",
//     gridStyle: "font-size:4px"
//   })
// }
</script>

<style scoped>
.biao1 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  border-right: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao5 {
  width: 25%;
  border-right: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao6 {
  width: 25%;
  border-right: 1px solid rgb(9, 165, 120);
  color: #000;
}

.biao2 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  border-right: 1px solid rgb(9, 165, 120);
  color: #000;
}

.biao3 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao4 {
  width: 75%;
  border-bottom: 1px solid rgb(9, 165, 120);
  color: #000;
}

.biao7 {
  border-right: 1px solid rgb(9, 165, 120);
  border-bottom: 1px solid rgb(9, 165, 120);
}
#proposal {
  width: 1075px;
  height: 456px;
  background: url("../../assets/img/report_proposal.png");
}

/deep/ #elTextThree {
  width: 100%;
}

/deep/.el-textarea__inner {
  width: 946px;
  height: 157px;
  border-radius: 30px;
  border: 1px solid #2ab28b;
}

/deep/.el-textarea__inner .red {
  width: 946px;
  height: 157px;
  border-radius: 30px;
  border: 1px solid #2ab28b;
}

#elTextTwo {
  background: #2ab28b;
}

/deep/.el-textarea {
  width: 80%;
  margin-left: 70px;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}

.shu {
  width: 5px;
  height: 30px;
  background: #2ab28b;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 5%;
}

.shured {
  width: 5px;
  height: 30px;
  background: red;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 5%;
}

.right-box-card {
  width: 100%;
  margin-left: 0%;
}

.el-card.is-always-shadow {
  box-shadow: none;
}

.el-card {
  border: none;
}

.report {
  /*width: 595px;*/
  /*height: 842px;*/
}

.titles {
  margin-right: 20px;
}

#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
  height: 100px;
  margin-top: 100px;
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  margin-left: 70%;
}

.subTitle {
  font-size: 30px;
  text-align: center;
  height: 40px;
  color: #2ab28b;
  /*border-bottom: 1px dashed  red;*/
}

#two {
  width: 1075px;
  height: 1244px;
  border-left: 1px #999999 solid;
  border-right: 1px #999999 solid;
  margin: 0 auto 0 auto;
}

#basic {
  font-size: 16px;
  width: 100%;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  /*margin: 60px auto 0 auto;*/
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic .symptom_title {
  font-size: 20px;
  margin-top: 30px;
}

.every {
  height: 55px;
  line-height: 55px;
  width: 23%;
  float: left;
  margin-left: 10%;
  font-weight: bold;
}

#basic .symptom {
  text-align: left;
  line-height: 35px;
}

#basic .symptom .every {
  width: 30%;
  float: left;
  margin-left: 2%;
}

.symptom_content {
  width: 100%;
  float: left;
  margin-left: 120px;
}

.service_plate {
  background: url("../../assets/img/evaluaction_service_plate.png") center
    no-repeat;
}

.dietOn {
  width: 100%;
  /* height: 510px; */
  /* margin-top:90px; */
  /* margin-top:150px; */
  padding-top: 20px;
  /* padding-bottom: 60px; */
}

.everyRed {
  color: red;
}

.everyOrange {
  color: orange;
}

.everyBlack {
  color: #333333;
}

.time-botton {
  background-color: #2ab28b;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 42px 0 0 40px;
  text-align: center;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85ce61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  /* box-shadow: 5px 5px 2px #888888; */
  margin: 20px 0 20px 40%;
}

.der {
  width: 240px;
  height: 174px;
  background: url("../../assets/img/evaluaction_service_plate.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: auto;
}

.platesFoods {
  margin-top: 5px;
  margin-left: 8px;
  color: #333333;
  font-size: 14px;
  text-align: center;
}

.platesFoods div {
  padding-bottom: 5px;
}

.platesFoods span {
  color: #666666;
}

.plates {
  width: 33%;
  float: left;
}

.plates .plates-top-img {
  float: left;
  margin-left: 1%;
  width: 30%;
}

.time-left-color {
  background: #85ce61;
}

.time-common-color {
  background: #e8b973;
}

.time-right-color {
  background: #6ea9e0;
}
</style>
